<template>
  <el-card body-style="min-height: 86vh">
    <!-- 新增、筛选按钮 -->
    <div class="flex justify-between">
      <div>
        <el-button type="primary" @click="handelAddEmployee">新增</el-button>
      </div>
      <div>
        <el-button circle @click="handleGetTableList()">
          <template #icon
            ><el-icon> <Refresh /> </el-icon
          ></template>
        </el-button>
      </div>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData">
      <el-table-column label="员工姓名" prop="name" align="center"></el-table-column>
      <el-table-column label="联系电话" prop="phone" align="center"></el-table-column>
      <el-table-column label="角色" prop="role" align="center"></el-table-column>
      <el-table-column label="状态" prop="status" align="center">
        <template #default="{ row }">
          <el-tag v-if="row.status === 1" type="primary">在职</el-tag>
          <el-tag v-else type="danger">离职</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button type="primary" @click="handleEdit(row)">修改</el-button>
          <el-button type="primary" @click="handleRole(row)">角色</el-button>
          <el-popconfirm
            width="180"
            title="是否要删除该员工？"
            confirm-button-text="确定"
            cancel-button-text="取消"
            @confirm="handleDelete(row)"
          >
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改表单 -->
    <form-drawer ref="formDrawerRef" :title="drawerTitle" @submit="handleSubmit">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="员工姓名" prop="name">
          <el-input v-model="form.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="form.phone" disabled></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch
            v-model="form.status"
            :active-value="1"
            :inactive-value="0"
            active-text="在职"
            inactive-text="离职"
            size="large"
            inline-prompt
          ></el-switch>
        </el-form-item>
      </el-form>
    </form-drawer>
    <!-- 角色 -->
    <form-drawer ref="formDrawerRoleRef" title="角色" @submit="handleSubmitRole">
      <el-form ref="formRoleRef" :model="roleForm" :rules="roleRules" label-width="120px">
        <el-form-item label="角色" prop="roleId">
          <el-select v-model="roleForm.roleId" placeholder="请选择角色">
            <el-option
              v-for="item in roleList"
              :key="item.id"
              :label="item.roleName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </form-drawer>
    <el-dialog v-model="imgVisible" title="员工邀请码" width="400">
      <el-image :src="imgUrl"></el-image>
      <div class="flex justify-center text-red-600">请让员工使用微信扫一扫</div>
    </el-dialog>
  </el-card>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useInitTable, useInitForm } from "@/hooks/useCommon";
import FormDrawer from "@/components/FormDrawer.vue";
import {
  getEmployeePageApi,
  editEmployeeApi,
  deleteEmployeeApi,
  getEmployeeInviteCodeApi,
  setEmployeePermissionApi
} from "@/api/repair";
import { getRoleAllListApi } from "@/api/user";

const { tableData, handleDelete, handleGetTableList } = useInitTable({
  getTableList: getEmployeePageApi,
  deleteData: deleteEmployeeApi
});

//修改
const { form, formRef, rules, drawerTitle, formDrawerRef, handleEdit, handleSubmit } = useInitForm({
  form: {
    id: "",
    status: 1
  },
  updateData: editEmployeeApi,
  success: () => {
    handleGetTableList();
  }
});
// 角色
const isQrCode = ref(false);
const formDrawerRoleRef = ref(null);
const formRoleRef = ref(null);
const roleForm = ref({
  roleId: ""
});
const roleRules = ref({
  roleId: [{ required: true, message: "请选择角色", trigger: "blur" }]
});
// 新增-按钮
const handelAddEmployee = () => {
  handleGetRoleList();
  isQrCode.value = true;
  (formDrawerRoleRef.value as any).open();
};
// 角色-按钮
const curEmployeeId = ref("");
const handleRole = (val: any) => {
  curEmployeeId.value = val.id;
  handleGetRoleList();
  isQrCode.value = false;
  (formDrawerRoleRef.value as any).open();
};
// 角色-确定
const handleSubmitRole = async () => {
  if (formRoleRef.value) {
    await (formRoleRef.value as any).validate((valid: any) => {
      if (valid) {
        isQrCode.value ? handleCreateQrCode() : handleConfigRole();
      }
    });
  }
};
// 生成员工邀请码
const imgVisible = ref(false);
const imgUrl = ref("");
const handleCreateQrCode = async () => {
  try {
    (formDrawerRoleRef.value as any).showLoading();
    const res = await getEmployeeInviteCodeApi({
      roleId: roleForm.value.roleId
    });
    imgUrl.value = (res as any).accessUrl;
    imgVisible.value = true;
    (formDrawerRoleRef.value as any).close();
  } finally {
    (formDrawerRoleRef.value as any).hideLoading();
  }
};
// 分配角色
const handleConfigRole = async () => {
  try {
    (formDrawerRoleRef.value as any).showLoading();
    await setEmployeePermissionApi({
      employeeId: curEmployeeId.value,
      roleIds: [roleForm.value.roleId]
    });
    (formDrawerRoleRef.value as any).close();
  } finally {
    (formDrawerRoleRef.value as any).hideLoading();
  }
};
// 获取角色列表
const roleList = ref<any[]>([]);
const handleGetRoleList = async () => {
  const res = await getRoleAllListApi();
  roleList.value = res as any;
};
</script>
<style scoped lang="scss">
.avatar-uploader {
  width: 100px;
  height: 100px;
  :deep(.el-upload) {
    border: 1px dashed var(--el-border-color);
  }
  .avatar,
  .avatar-uploader-icon {
    width: 100px;
    height: 100px;
  }
}
</style>
